<script setup lang="ts">
import qrcodeParser from 'qrcode-parser'
import { Message, Upload, type UploadFileOptions } from 'vexip-ui'
import { ref, watch } from 'vue'

const url = defineModel<string>()
const fileList = ref<UploadFileOptions[]>([])

watch(fileList, async () => {
  if (!fileList.value.length) return
  try {
    url.value = await qrcodeParser(fileList.value[0].source as File)
  } catch {
    Message.error('无法解析上传图片中的字符串')
    fileList.value = []
  }
})
</script>

<template>
  <Upload
    v-model:file-list="fileList"
    :filter="['jpeg', 'jpg', 'png']"
    :count-limit="1"
    @delete=";(fileList = []), (url = '')"
    manual
  />
</template>
